<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>台风路径</title>
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/swiper.min.css" />
  <link rel="stylesheet" href="js/layui/css/layui.css" />
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">

</head>
<body>

    <div class="section">
        <div class="tep_map" id="tep_map"></div>
        <div class="typhoon_dh">
            <ul>
                <li>
                    <div class="dh_yj">
                        <img class="dh_yj_xz" src="images/yj_hf.png">
                        <img class="dh_yj_xz1" src="images/yj_hf1.png">
                        <span>回放</span>
                    </div> 
                </li>
                <li>
                    <div class="dh_yj">
                        <img class="dh_yj_xz" src="images/yj_tf.png">
                        <img class="dh_yj_xz1" src="images/yj_tf2.png">
                        <span>台风列表</span>
                    </div> 
                    <div class="dh_ej ej_tf">
                        <ol>
                            <li>
                                <span>台风1号</span>
                                <p>20190806 12:00</p>
                            </li>
                            <li>
                                <span>台风1号</span>
                                <p>20190806 12:00</p>
                            </li>
                            <li>
                                <span>台风1号</span>
                                <p>20190806 12:00</p>
                            </li>
                            <li>
                                <span>台风1号</span>
                                <p>20190806 12:00</p>
                            </li>
                        </ol>
                        <i class="fa fa-angle-down"></i>
                    </div>
                </li>
                <li>
                    <div class="dh_yj">
                        <img class="dh_yj_xz" src="images/yj_tl.png">
                        <img class="dh_yj_xz1" src="images/yj_tl1.png">
                        <span>图例</span>
                    </div> 
                    <div class="dh_ej ej_tl">
                        <ol>
                            <li>
                                <img src="images/typ_fengbao.png">
                                <span>热带低压</span>
                            </li>
                            <li>
                                <img src="images/typ_fengbao.png">
                                <span>热带风暴</span>
                            </li>
                            <li>
                                <img src="images/typ_fengbao.png">
                                <span>强热带风暴</span>
                            </li>
                            <li>
                                <img src="images/typ_fengbao.png">
                                <span>台风</span>
                            </li>
                            <li>
                                <img src="images/typ_fengbao.png">
                                <span>强台风</span>
                            </li>
                            <li>
                                <img src="images/typ_fengbao.png">
                                <span>超强台风</span>
                            </li>
                            <li>
                                <img src="images/typ_fengbao.png">
                                <span>影响区域</span>
                            </li>
                            <li>
                                <img src="images/typ_fengbao.png">
                                <span>7级风圈</span>
                            </li>
                            <li>
                                <img src="images/typ_fengbao.png">
                                <span>7级风圈</span>
                            </li>
                        </ol>
                        <i class="fa fa-angle-down"></i>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</body>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/mobile.js"></script>
<script type="text/javascript" src="js/layui/layui.js"></script>
<script type="text/javascript">

    $(function(){
        
        // 一级菜单选中
        $('.typhoon_dh ul li').click(function(){
            $(this).addClass('active');
            $(this).find('.dh_ej').show();
            $(this).siblings().find('.dh_ej').hide();
            $(this).siblings().removeClass('active');
        });

        // 点击地图取消选中
        $('.tep_map').click(function(){
             $('.typhoon_dh ul li').removeClass('.active');
             $('.typhoon_dh ul li').find('.dh_ej').hide();
        })

    });
</script>
